function ImageFusion(face, target, canvas, touchControl) {
	this.target = document.getElementById(target);
	this.face = document.getElementById(face);
	this.canvas = document.getElementById(canvas);
	this.ctx = this.canvas.getContext("2d");
	this.touchControl = document.getElementById(touchControl);
	this.viewPortWidth = document.documentElement.clientWidth || document.body.clientWidth;
	this.viewPortHeight = document.documentElement.clientHeight || document.body.clientHeight;
	this.targetWidth = 0;
	this.targetHeight = 0;
	this.lastTop = 0; //图片静止的top距离
	this.lastLeft = 0; //图片静止的left距离
	this.top = 0; //图片实时移动的距离top
	this.left = 0; //图片实时移动的距离left
	this.scale = 1; //图片相对于当前图片宽度的放大比例
	this.ratio = 1; //图片原图的比例，用于等比例缩放原图画到canvas上;
	this.targetRatio = 1;
	this.width = 1; //图片的实时宽度
	this.height = 1; //图片的实时高度
	this.lastWidth = 0; //图片hammer后最后一次的宽度
	this.lastHeight = 0; //图片hammer后最后一次的高度
	this.rotation = 0; //图片旋转的角度
	this.centerX = 0;
	this.centerY = 0;
}
ImageFusion.prototype.canvasInit = function() {
	this.targetRatio = this.target.height / this.target.width;
	if(this.targetRatio === 0) {
		throw "target图片还未加载成功，调用方式不对";
	}
	this.targetWidth = this.viewPortWidth;
	this.targetHeight = this.targetWidth * this.targetRatio;
	this.canvas.width = this.viewPortWidth;
	this.canvas.height = this.targetHeight;
	this.touchControl.style.height = this.targetHeight;
}
ImageFusion.prototype.paramsInit = function() {
	this.ratio = this.face.height / this.face.width;
	if(this.face.width > this.viewPortWidth) {
		this.lastWidth = this.viewPortWidth;
	} else {
		this.lastWidth = this.face.width;
	}
	this.lastHeight = this.lastWidth * this.ratio;
}
ImageFusion.prototype.drawImageToCanvas = function() {
	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	this.ctx.drawImage(this.face, this.left, this.top, this.lastWidth * this.scale, this.lastHeight * this.scale);
}
ImageFusion.prototype.createImage = function() {
	this.touchControl.removeChild(this.target);
	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	this.ctx.drawImage(this.face, this.left, this.top, this.lastWidth * this.scale, this.lastHeight * this.scale);
	this.ctx.drawImage(this.target, 0, 0, this.targetWidth, this.targetHeight);
	var image = new Image();
	image.src = this.canvas.toDataURL("image/png");
	this.canvas.style.display = "none";
	return image;
}
ImageFusion.prototype.hammerInit = function() {
	var self = this;
	var hammer = new Hammer.Manager(this.touchControl);
	var pinch = new Hammer.Pinch();
	var pan = new Hammer.Pan();
	hammer.add([pinch, pan]);
	hammer.get('pan').set({
		direction: Hammer.DIRECTION_ALL,
		enable: true
	});
	hammer.get('pinch').set({
		enable: true
	});
	hammer.on("pan panend pinch pinchmove pinchend", function(e) {
		if(e.type == "pan") {
			self.left = self.lastLeft + e.deltaX;
			self.top = self.lastTop + e.deltaY;

			self.scale = e.scale;
			self.width = self.lastWidth * self.scale;
			self.height = self.lastHeight * self.scale;

			self.drawImageToCanvas();
		}
		if(e.type == "panend") {
			self.lastLeft = self.left;
			self.lastTop = self.top;

			self.scale = e.scale;
			self.width = self.lastWidth * self.scale;
			self.height = self.lastHeight * self.scale;
			self.lastWidth = self.width;
			self.lastHeight = self.height;

			self.drawImageToCanvas();
		}
		if(e.type == "pinch") {
			self.centerX = e.center.x;
			self.centerY = e.center.y;
			self.rotation = e.rotation;
			self.left = self.lastLeft - (e.center.x - self.lastLeft) * (self.scale - 1);
			self.top = self.lastTop - (e.center.y - self.lastTop) * (self.scale - 1);
			self.scale = e.scale;
			self.width = self.lastWidth * self.scale;
			self.height = self.lastHeight * self.scale;

			self.drawImageToCanvas();
		}
		if(e.type == "pinchend") {
			self.scale = e.scale;
			self.lastWidth = self.width;
			self.lastHeight = self.height;

			self.lastLeft = self.left;
			self.lastTop = self.top;
		}

	});

}
ImageFusion.prototype.init = function() {
	var _ = this;
	function targetInit() {
		if(_.target.complete) {
			_.start();
		} else {
			_.target.onload = function() {
				_.start();
			}
		}
	}
	if(this.face.complete) {
		targetInit();
	} else {
		this.face.onload = function() {
			targetInit();
			
		}
	}
}
ImageFusion.prototype.start = function() {
	this.canvasInit();
	this.paramsInit();
	this.hammerInit();
	this.drawImageToCanvas();
}